/**
  * desc：  rn加载对话框，使用modal实现
  * author：lawrence
  * date：  2019/3/22 上午11:44
  */
import React, {Component} from 'react';
import {Modal, StyleSheet, View, ViewPropTypes} from 'react-native';
import Colors from "../../theme/Colors";
import Loading from "./Loading";

type Props = {
    backgroundColor: string,    // 背景颜色
    onRequestClose: any,        // android硬件返回处理
    message: string,            // 加载提示语
    loadingStyle: ViewPropTypes.style,      // loading框样式
    messageStyle: ViewPropTypes.style,      // 加载提示语样式
}

type State = {
    visible: boolean,           // 显示隐藏
}

export default class LoadingModal extends Component<Props, State> {

    static defaultProps = {
        backgroundColor: Colors.background_modal,
        onRequestClose: null,
    };

    /**
     * 显示对话框
     * @public
     */
    show = () => this.setState({visible: true});

    /**
     * 关闭对话框
     * @public
     */
    dismiss = () => this.setState({visible: false});

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        }
    }

    render() {
        const {backgroundColor, onRequestClose, message, messageStyle, loadingStyle} = this.props;
        return (
            <Modal visible={this.state.visible} transparent={true} animationType={'fade'}
                   onRequestClose={() => !!onRequestClose ? onRequestClose() : this.dismiss()}>
                <View style={[styles.container, {backgroundColor}, this.props.style]}>
                    <Loading style={loadingStyle} message={message} messageStyle={messageStyle}/>
                </View>
            </Modal>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
